<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>upload</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <input type="file" name="file" id="file">
    <button id="upload" onClick="upload()">upload</button>
    <script type="text/javascript">
        var bytesPerPiece = 1024 * 1024; // 每个文件切片大小定为1MB .
        var totalPieces;
        var max_concurrent = 5;//最大并发数量
        window.concurrent = 0;
        //发送请求
        function upload() {
            var blob = document.getElementById("file").files[0];
            var start = 0;
            var end;
            var index = 0;
            var filesize = blob.size;
            var filename = blob.name;

            //计算文件切片总数
            totalPieces = Math.ceil(filesize / bytesPerPiece);

            setInt = setInterval(function () {
                if (start < filesize) {
                    console.log(start)
                    if (concurrent < max_concurrent) {
                        concurrent++;
                        console.log(concurrent);

                        if (index >=0) {
                            clearInterval(setInt)
                        }

                        end = start + bytesPerPiece;
                        if (end > filesize) {
                            end = filesize;
                        } // 匹配最后一个分片的情况
                        total_blob = parseInt(filesize / bytesPerPiece);
                        if ((filesize % bytesPerPiece) > 1) { //如果有余数 加1
                            total_blob++;
                        }

                        var chunk = blob.slice(start, end);//切割文件
                        var sliceIndex = blob.name + index;
                        var formData = new FormData();
                        formData.append('file_name', blob.name);
                        formData.append('blob_num', index);
                        formData.append('total_blob_num', total_blob);
                        formData.append("file", chunk);
                        console.log(formData)
                        $.ajax({
                            url: '/index.php',
                            type: 'POST',
                            cache: false,
                            data: formData,
                            processData: false,
                            contentType: false,
                        }).done(function (res) {
                            console.log(res);

                            setTimeout(() => {
                                concurrent--;
                            }, 100);
                        }).fail(function (res) {
                            console.log(3);
                            setTimeout(() => {
                                concurrent--;
                            }, 100);
                        });

                        start = end;
                        index++;
                    } else {
                        console.log('wait')
                    }
                } else {
                    console.log(223)
                    clearInterval(setInt)
                }
            }, 100)

        }
    </script>
</body>

</html>